<template>
  <div class="addressTabulation">
    <singleRecord v-for="item in addressList" :key="item.id" :name="item.name" :src="item.src" @click.native="jumpTo(item)" :unread="item.unread" :id="item.id">
    </singleRecord>
  </div>
</template>

<script>
import singleRecord from '@/components/searchBox/components/singleRecord'
export default {
  data () {
    return {

    }
  },
  computed: {
    // 左侧列表
    addressList () {
      return [
        {
          id: 1,
          name: '我的好友',
          src: require('@/assets/addressList/myFriend.png'),
          path: '/addressList/myFriends',
          unread: 0
        },
        {
          id: 2,
          name: '群组',
          src: require('@/assets/addressList/group.png'),
          path: '/addressList/group',
          unread: 0
        },
        {
          id: 3,
          name: '好友申请',
          src: require('@/assets/addressList/friendApply.png'),
          path: '/addressList/friendApply',
          unread: this.$store.getters['addressList/unreadReal']
        }
      ]
    }
  },
  watch: {
    '$route.path': {
      immediate: true,
      handler (val) {
        this.addressList.forEach(item => {
          if (val === item.path) {
            this.$store.commit('addressList/set_rightHeader', item)
            this.$store.commit('addressList/set_currentId', item.id)
          }
        })
      }
    }
  },
  components: {
    singleRecord
  },
  methods: {
    jumpTo (item) {
      this.$router.push(item.path)
    }
  },
  created () {
    this.jumpTo(this.addressList[0])
  },
  beforeDestroy () {
    this.$store.commit('addressList/set_currentId', '')
  }
}
</script>

<style scoped lang="scss">
.addressTabulation {
  height: calc(100% - 72px);
  .message {
    padding: 16px 0 16px 15px;
  }
}
</style>
